<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_事件监听</title>
</head>
<body>
<button onclick="alert('警告框')">弹出警告框</button>
<button id="btn">我是按钮</button>
<h4>注意:天气转凉你应该做这些事...</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto beatae, cupiditate dignissimos
        doloribus eos et, id ipsa iure iusto magnam minus molestiae odio porro quia quis repellat repellendus sequi.
    </div>
    <div>Aperiam optio saepe sed! Accusantium beatae consectetur deserunt dolorem eius fugiat molestias neque quaerat
        veritatis vero! Molestiae nobis reprehenderit sapiente veniam? Excepturi facere necessitatibus rem. Assumenda
        consequuntur ducimus quam quidem!
    </div>
    <div>Aliquam dicta dolor ipsum minima modi mollitia natus porro sed similique sunt tempora ut veniam, voluptates.
        Atque ducimus eveniet maiores nihil nisi quam suscipit? Ad atque excepturi nam velit veniam.
    </div>
    <div>Asperiores at beatae commodi, delectus deleniti dolores doloribus error explicabo, facere fuga fugiat fugit
        inventore ipsa laborum laudantium nesciunt officia quam recusandae repellat saepe sint, suscipit tempora
        voluptas. Labore, repellat.
    </div>
    <div>Ad adipisci, amet, blanditiis nesciunt nobis nostrum quae quaerat quasi quia quisquam sit temporibus ullam. A,
        architecto consequuntur facere hic illum, ipsa itaque nemo nihil quisquam, rerum sapiente voluptas voluptatem.
    </div>
    <div>Accusamus cupiditate esse iure natus nobis pariatur repellendus rerum similique vel. Aspernatur at dicta ea
        error ipsum, libero magni non quos reiciendis repellat saepe, tempora ullam vitae. Dolore, numquam, repudiandae!
    </div>
    <div>Ad aliquid animi architecto aut commodi consectetur consequuntur debitis, deleniti deserunt eius exercitationem
        illo itaque libero maxime minima necessitatibus nostrum officiis porro, quas quidem quo, recusandae vel vero
        voluptate voluptatum?
    </div>
    <div>Ipsa neque obcaecati quia! Adipisci, amet at atque beatae blanditiis deserunt dolorem est exercitationem
        expedita illum ipsam itaque laborum minus necessitatibus nemo neque odit officia optio perspiciatis placeat
        quaerat veritatis!
    </div>
    <div>Eligendi maxime, nesciunt nobis nostrum omnis possimus quidem rerum. Ab aliquam animi aspernatur autem
        blanditiis delectus dolore eius impedit iste, itaque minima natus nobis numquam placeat quasi quos repellat
        sequi.
    </div>
    <div>Accusamus adipisci beatae commodi culpa doloremque doloribus, est excepturi facilis fugiat illo incidunt, ipsum
        laborum necessitatibus nemo, nesciunt nostrum officia quas qui sequi similique sunt tempora ullam velit voluptas
        voluptate.
    </div>
    <div>Aut dolore enim eos eum ipsa molestiae sed? Ad aliquid beatae, consectetur consequatur, enim excepturi expedita
        itaque labore natus nihil nulla quae quas quasi ut veniam. A debitis excepturi tempore?
    </div>
    <div>Atque consequuntur doloremque harum incidunt ipsum quae quia, sed vitae? Accusamus ad consectetur, culpa cum
        debitis dignissimos error hic id impedit nulla officiis pariatur quae quia quos recusandae repudiandae, unde.
    </div>
    <div>Ad blanditiis culpa natus ratione tenetur! Dolorum itaque, iure nostrum placeat repellendus rerum similique ut
        vitae! Amet aperiam dignissimos facilis ipsam recusandae, sint tempore! Dignissimos exercitationem maiores
        perspiciatis quasi recusandae.
    </div>
    <div>At dolor dolores impedit in, incidunt iste laudantium nulla repudiandae suscipit voluptatem! Consequatur
        distinctio magnam unde. Amet aperiam asperiores aspernatur aut commodi dolores eum facere impedit neque,
        repellat rerum, totam.
    </div>
    <div>Aperiam, corporis deserunt ducimus expedita itaque iusto labore libero molestiae nisi odio perferendis,
        reiciendis rem repudiandae rerum, sint soluta sunt tempore voluptate voluptatem voluptates! Amet aut illo
        impedit quasi sed?
    </div>
    <div>Animi architecto, beatae cupiditate delectus distinctio enim ex excepturi exercitationem fugit, numquam
        perspiciatis quisquam vel voluptatibus! Aperiam aspernatur, assumenda at, atque, distinctio et eveniet expedita
        fugit incidunt molestias nostrum nulla.
    </div>
    <div>Corporis est facilis laudantium, quo repellat suscipit ullam? Accusantium animi consequuntur deserunt labore
        libero modi temporibus velit voluptatem. Eius magni nesciunt nobis nulla pariatur perspiciatis quo rem, velit
        veritatis. Sunt?
    </div>
    <div>Animi corporis ex exercitationem labore, non obcaecati quis sed suscipit? Ad aut commodi, dicta earum ex
        excepturi explicabo fugiat, laborum magnam natus perferendis porro praesentium repellendus similique sunt
        temporibus voluptatum.
    </div>
    <div>Ab dignissimos dolore eligendi ex fugit illo impedit, in minus quae voluptas! Adipisci amet consequatur eaque
        eligendi, eum exercitationem fugit possimus quibusdam, quisquam, soluta temporibus ullam! Architecto corporis
        hic nulla.
    </div>
    <div>Beatae blanditiis corporis deserunt dolor earum facilis fugit illo in numquam perspiciatis porro possimus quae
        quasi, quod tempore tenetur vel. Alias nemo nihil nobis saepe vero. Consequatur laudantium minima vel?
    </div>
    <div>Aperiam, deserunt dignissimos dolorem error officia rem repellendus voluptatum! Aliquid dolorum fugiat harum
        magni possimus! Eligendi provident quia quibusdam, tempora unde voluptas? Consequatur, est fuga impedit nulla
        officiis qui quos?
    </div>
    <div>Assumenda facere mollitia ratione repellat reprehenderit, rerum velit. Ab, ad aliquid deleniti ea eius est et
        laudantium modi officia optio praesentium, quos ullam vel. Perferendis quam quod reprehenderit sunt tempora.
    </div>
    <div>Aliquam consectetur dicta eaque eligendi explicabo, harum impedit incidunt ipsum iusto magnam mollitia nostrum
        officia provident quae quas similique vel! Ab aperiam cupiditate eaque fuga rerum. Et impedit perspiciatis
        quidem!
    </div>
    <div>Amet animi deleniti, distinctio dolore eaque id itaque minus officia perferendis perspiciatis qui quia repellat
        repellendus sed totam! Accusantium dolore eligendi error ex explicabo iste minima quia sint. Maiores, sed.
    </div>
    <div>Aut commodi doloribus, est fuga harum inventore minima, modi nesciunt quidem repudiandae tenetur ullam vel!
        Alias amet autem cum dicta dolores enim eos, iure repellendus reprehenderit sit temporibus totam voluptatem.
    </div>
    <div>Blanditiis eius fugit veniam. Aut culpa deserunt dignissimos, enim esse excepturi expedita incidunt ipsa iusto
        nemo officiis repellendus saepe sapiente sint sit sunt vel! Consectetur ducimus eveniet in quia rerum.
    </div>
    <div>Accusantium architecto cumque deleniti dicta eos explicabo fugit, illo ipsa iusto libero odit possimus quam,
        quis recusandae tempore temporibus unde vel voluptate? Beatae consequatur corporis, facere incidunt vitae
        voluptate voluptatum?
    </div>
    <div>A accusamus accusantium, alias aliquam amet asperiores aut blanditiis consequuntur doloremque ducimus, et
        eveniet fugiat fugit hic id, ipsum iste laborum laudantium minus nemo possimus quibusdam quidem quos tempora
        voluptates.
    </div>
    <div>Aliquam beatae blanditiis commodi consequatur cupiditate dolore esse expedita inventore ipsa laboriosam magnam
        molestias, nesciunt nostrum porro quibusdam repellendus sapiente soluta! Debitis dolore doloremque expedita
        explicabo fugit maiores officiis velit?
    </div>
    <div>Accusantium aspernatur culpa dicta, eum explicabo illum in mollitia perferendis quos veniam! Adipisci
        consequatur ducimus eos excepturi hic nisi nobis, numquam perspiciatis ratione rem repellendus reprehenderit
        tenetur, vel velit veniam.
    </div>
    <div>Ab animi architecto deserunt dolor earum expedita fugit hic ipsum libero magni maxime, molestiae molestias
        mollitia natus nesciunt, obcaecati officia omnis possimus quae quidem quod recusandae rerum totam ut velit.
    </div>
    <div>Alias dolor ducimus ex facilis harum, in, itaque iusto magnam non pariatur quo sed suscipit temporibus tenetur
        veritatis? Ab accusamus blanditiis dolorem inventore iure optio quod quos unde velit voluptatum.
    </div>
    <div>Doloribus exercitationem expedita ipsa, laboriosam qui repellendus! Deserunt nesciunt nihil quaerat sed
        voluptas? Aspernatur consectetur cum cupiditate esse exercitationem iste molestias natus, officiis quam quod
        saepe tenetur, vero! Consectetur, incidunt!
    </div>
    <div>Doloribus eligendi illo laudantium maxime nam natus perferendis quo temporibus vero! Alias consequatur
        doloribus dolorum eius eos labore laudantium magnam, quidem quis, quo, sapiente tempora ullam velit. Eos,
        exercitationem omnis?
    </div>
    <div>Animi pariatur repellat veniam voluptatem. Aliquam asperiores at autem blanditiis consequatur eum iure magnam
        modi molestiae, nesciunt nostrum nulla quaerat quisquam quos ratione sit, unde ut, vel vero voluptas voluptate.
    </div>
    <div>Aliquam consectetur dolores, ducimus earum excepturi facere ipsa magni modi, non nostrum quo ratione
        repellendus sint totam, voluptates. Dolor dolorem est eveniet ex fuga illo itaque numquam perspiciatis, repellat
        vel.
    </div>
    <div>Ad fuga hic ipsam iusto, modi nam necessitatibus neque quae repellat tempora. Accusantium alias doloribus
        error, illum laboriosam mollitia natus odit optio pariatur perspiciatis quidem ullam unde! Accusantium,
        perspiciatis, similique.
    </div>
    <div>Ab, illum, nemo! Beatae cumque delectus distinctio dolorem doloribus dolorum ea enim, facilis illo impedit iure
        laborum magni maiores modi nihil nobis nulla odit quia suscipit unde ut, velit veritatis.
    </div>
    <div>Dicta dolorum eveniet id laborum laudantium, necessitatibus quasi rerum voluptatem? Amet animi cupiditate dicta
        dolor eaque eum fugit iure quo sunt veritatis! Earum hic itaque, maiores nisi qui repudiandae rerum.
    </div>
    <div>Aliquam assumenda consequuntur delectus dolore dolorem eum illum ipsum placeat porro, quae quod ratione rem
        suscipit! A commodi dicta, ducimus eveniet excepturi, explicabo, in laborum magni nisi nobis quo sit!
    </div>
    <div>Atque dignissimos dolorem expedita incidunt officia tempora veniam. Ab impedit libero nam nostrum quia
        similique, sint voluptatibus. Beatae delectus deserunt dolore dolorem dolorum error laboriosam optio praesentium
        quam voluptas! Ex.
    </div>
    <div>Delectus enim est mollitia nesciunt quos sit sunt unde velit. Alias amet beatae blanditiis, consequatur
        distinctio eveniet molestias mollitia neque praesentium repellendus! Ea impedit magnam minus necessitatibus
        perferendis quos unde.
    </div>
    <div>A alias amet, eos maiores nisi placeat rem reprehenderit repudiandae voluptatem. Dolore eius laborum nam
        perferendis quasi quibusdam quidem velit, vero vitae! Cum dolor labore officia perferendis quae quidem
        veritatis.
    </div>
    <div>Dicta facere magnam non saepe totam veniam voluptates. Amet at cum deleniti eius exercitationem harum, maiores
        minima non nostrum odio quam quia, ratione repellat similique sint sit tempore vel. Cum!
    </div>
    <div>Eveniet officiis reiciendis rerum sit sunt? Est eum fugiat in ipsam mollitia necessitatibus praesentium quasi
        sit? Autem harum ipsa officiis repellat rerum suscipit voluptas? Harum molestiae porro quas voluptate.
        Cupiditate.
    </div>
    <div>Consequatur deleniti eum exercitationem incidunt ipsa ipsam laudantium magni minima nostrum officia quaerat,
        quibusdam repellat repudiandae rerum tenetur vel voluptatem! Accusamus, dolore doloribus ea est eveniet fugiat
        iste molestiae officia.
    </div>
    <div>Accusamus, molestias quia. Consectetur distinctio doloribus maiores natus, officia quas recusandae vitae!
        Consectetur, dolore laboriosam neque recusandae reiciendis suscipit? Commodi doloremque esse eum fugiat nemo
        optio provident quis quos voluptates.
    </div>
    <div>Ad adipisci amet eaque eos expedita facilis fugit nam numquam, quibusdam repudiandae. Adipisci dolor dolorem
        ea, enim ipsam, ipsum itaque molestiae nobis non officia quibusdam recusandae, rerum sed veritatis vero!
    </div>
    <div>Amet beatae blanditiis cupiditate dignissimos dolorem dolores doloribus ea eos esse ex illo incidunt ipsam
        natus nobis nostrum nulla obcaecati odit porro quae sequi similique sit, tenetur unde veritatis voluptates.
    </div>
    <div>A alias debitis dolore enim error explicabo labore maxime minus numquam vel. Amet atque beatae exercitationem
        facilis minima omnis, optio provident quod vero voluptatibus! At ipsum laudantium officiis ratione voluptatem.
    </div>
    <div>Animi aspernatur beatae cum dolores, dolorum eligendi exercitationem illo in iste minima, molestiae mollitia
        neque nobis placeat porro, quae quasi quibusdam quis ratione repellendus rerum similique temporibus vel veniam
        voluptatum.
    </div>
    <div>Accusamus ad adipisci, alias architecto at consectetur debitis dolore ducimus ea eos et eum fugit hic impedit
        maxime natus nulla odio officiis optio provident repudiandae rerum sapiente soluta unde voluptatem!
    </div>
    <div>A accusantium amet architecto cupiditate doloremque dolorum earum error iusto laudantium natus nisi non nostrum
        odio perferendis praesentium, quaerat quas quo rem sequi tempore temporibus ullam voluptates. Est, repellat,
        temporibus.
    </div>
    <div>Deserunt nesciunt nulla quibusdam. Earum quidem sequi vitae! Corporis esse impedit maxime minima, nihil
        praesentium unde! Accusamus asperiores commodi harum id iusto, maiores quidem rem saepe, sapiente sit sunt
        veniam.
    </div>
    <div>Accusamus ad assumenda atque autem consequatur consequuntur cumque dicta fugiat fugit iure iusto labore
        laboriosam magni maiores nihil, nostrum nulla officiis qui quibusdam rerum saepe sed vitae! Maiores sapiente,
        velit.
    </div>
    <div>Cum distinctio dolorem exercitationem fugit inventore ipsa itaque laudantium magni odit officiis quasi quidem
        quis recusandae rem repellat reprehenderit repudiandae sit sunt, totam voluptate. Animi asperiores pariatur
        quaerat quibusdam quis?
    </div>
    <div>Ad animi consectetur delectus deleniti, dolorem doloremque ducimus facilis illo ipsa minima, natus
        necessitatibus nisi qui quo rem repellat, repellendus reprehenderit sit soluta tempora totam velit veniam vitae
        voluptate voluptates!
    </div>
    <div>Atque dicta ea, excepturi, fugit harum impedit labore odio placeat porro, ratione ullam unde voluptas! Amet,
        assumenda consequuntur corporis eveniet facere fuga hic laborum, minima, mollitia quam ratione reprehenderit
        sequi.
    </div>
    <div>Consequatur doloribus ipsa numquam quisquam saepe. Aut dolores ipsa laborum sed sequi sit sunt? Consequatur
        deserunt distinctio dolores et illo voluptatibus? Earum eveniet illo laborum mollitia, neque sequi sunt
        veritatis.
    </div>
    <div>Corporis earum eveniet, fuga fugiat incidunt itaque labore libero maiores, nam odit quaerat suscipit. Atque
        impedit ipsam iste, numquam officiis reiciendis rerum suscipit tempore. Minima, porro, sunt. Alias, in suscipit!
    </div>
</div>
<script>
    // 鼠标点击事件
    let buttonE = document.querySelector('#btn');
    buttonE.addEventListener('click',function (){
        alert('按钮被点击了!');
    })
    // 鼠标移入事件
    let h4E = document.querySelector('h4');
    h4E.addEventListener('mouseover',function (){
        console.log('该标题被查看了!')
    })
    // window对象浏览器内置的全局对象,代表了当前浏览器窗口
    // window.addEventListener('resize',function (){
    //     alert('窗口大小被修改了!')
    // })
    // window.addEventListener('scroll',function (){
    //     alert('页面被滚动了')
    // })
    // 关于JS对象的使用
    let p1 = {
        name:'张三',
        age:18,
        say:function (){
            console.log('我是'+this.name+'今年'+this.age+'岁');
        }
    }
    console.log(p1.name);
    console.log(p1.age);
    p1.say();

    // 2.先创建一个空对象,再动态给其添加属性与方法
    let p2 = {};
    p2.name = '李四';
    p2.age = 19;
    p2.say = function (){
        console.log('我是'+this.name+'今年'+this.age+'岁');
    };
    console.log(p2.name);
    console.log(p2.name);
    p2.say();
</script>
</body>
</html>